import {Component, OnDestroy, OnInit} from "@angular/core";
import {CommService} from "../comm-service";
import {FormBuilder, FormGroup} from "@angular/forms";
import {SharedService} from "../shared-service";

declare var $: any;

@Component({
  template: `
    <div class="title">
      <div class="title_text">{{comptitle}}</div>
    </div>
    <form class="form-horizontal" role="form" style="border-bottom: 1px solid #ccc;">
      <div class="row">
        <div class="col-lg-3">
          <div class="form-group">
            <label class="col-lg-3 control-label">告警类型：</label>
            <div class="col-lg-9">
              <select class="form-control" name="gjlx">
                <option value="">全部</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-lg-9">
          <div class="form-group">
            <label class="col-lg-1 control-label">告警时间：</label>
            <div class="col-lg-9">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                <input type="text" class="form-control datetimepickerB_content" id="s_sbtimegj"
                       [value]="s_obj.gjkssj">
                <span class="input-group-addon">至</span>
                <input type="text" class="form-control datetimepickerE_content" id="s_edtimegj"
                       [value]="s_obj.jgjssj">
                <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-3">
          <div class="form-group">
            <label class="col-lg-3 control-label">处理状态:</label>
            <div class="col-lg-9">
              <select class="form-control" name="clzt">
                <option value="">全部</option>
                <option value="1">已处理</option>
                <option value="0">未处理</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-lg-2">
          <div class="form-group">
            <button type="button" class="btn blue" (click)="inittable_gjxq()">
              <i class="fa fa-search"></i> 搜索
            </button>
          </div>
        </div>
      </div>
    </form>
    <div class="row">
      <div class="col-lg-12">
        <div style="margin-top: 10px;text-align: right">
          <button type="button" class="btn  btn-info" (click)="handerGjAll()">全部处理</button>&nbsp;&nbsp;&nbsp;&nbsp;
          <button type="button" class="btn  btn-info" (click)="handGj()">处理</button>&nbsp;&nbsp;&nbsp;&nbsp;
          <button type="button" class="btn  btn-info">导出</button>
        </div>
      </div>
    </div>
    <div class="row" style="margin-top: 10px">
      <div class="col-lg-12" *ngIf="table_gjxq">
        <my-table [o]="table_gjxq"></my-table>
      </div>
    </div>

    <div class="modal fade" id="gjhanderModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel2">
      <div class="modal-dialog smmodalwidth" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel2">告警处理</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <form class="form-horizontal" role="form" [formGroup]="formgroup_ggcl">
                <div class="col-lg-12">
                  <div class="form-group">
                    <label class="col-lg-3 control-label">处理意见:</label>
                    <div class="col-lg-8">
                      <textarea class="form-control" rows="5" formControlName="clyj_gjCtr"></textarea>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取 消
            </button>
            <button type="button" class="btn btn-primary">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>

  `,
  styles: [
    ".title{width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);margin-bottom: 15px;}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
  ]
})
export class TjbbGjxqZHComponent implements OnInit, OnDestroy {
  comptitle: string = "告警详情";
  s_obj: any = {
    gjkssj: "",
    jgjssj: "",
    kslx: "",
    dwkssj: "",
    dwjssj: "",
    sbid: "",
    sbxh: "",
    clzt: ""
  }
  table_gjxq: any;
  formgroup_ggcl: FormGroup;


  inittable_gjxq(): void {
    const that = this;
    this.table_gjxq = {
      tableid: "table_gjxq",
      url: "sjgz/rwjh/cxsjcrklb",
      reqobj: "",
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "",
      columns: [{
        title: "序号",
        field: "zbmc",
      }, {
        title: "设备名称",
        field: "kdmc",
      }, {
        title: "ID",
        field: "sjbmc",
      }, {
        title: "告警类型",
        field: "sjbzt",
      }, {
        title: "告警时间",
        field: "dqdz",
      }, {
        title: "告警地址",
        field: "jwd",
      }, {
        title: "处理状态",
        field: "bh"
      }, {
        title: "处理详情",
        field: "jwd",
        //events: this.myevents,
        formatter: function (v) {
          let str: string = "";
          str += "<button type='button' class='btn btn-xs btn-info xq_yjjy'><i class='fa fa-search'></i> 处理详情</button>";
          return str;
        }
      }]
    };
    this.table_gjxq.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 50;
  }


  createformgroup(): void {
    this.formgroup_ggcl = this.fb.group({
      clyj_gjCtr: []
    });
  }


  /**
   * 处理搜索表格
   */
  createSearchForm(): void {
    $('.datetimepickerB_content').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 结束时间不能小于开始时间,
      $(".datetimepickerE_content").datetimepicker("setStartDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    $('.datetimepickerE_content').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 开始时间不能大于结束时间
      $(".datetimepickerB_content").datetimepicker("setEndDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    const initBdate = this.commservice.YMDHMS_get(Date.now() - 8 * 60 * 60 * 1000);
    const initEdate = this.commservice.YMDHMS_get(false);
    this.s_obj.kssj = initBdate;
    this.s_obj.jssj = initEdate;
  }


  handerGjAll(): void {
    $("#gjhanderModal").modal({
      keyboard: true,
      backdrop: false
    });
  }


  handGj(): void {
    $("#gjhanderModal").modal({
      keyboard: true,
      backdrop: false
    });
  }

  constructor(private commservice: CommService,
              private sharedService: SharedService,
              private fb: FormBuilder) {

  }

  ngOnInit() {
    this.sharedService.emitChange({
      actiontype: "sendggsl"
    });
    this.createSearchForm();
    this.inittable_gjxq();
    this.createformgroup();
  }

  ngOnDestroy() {

  }

}
